<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-用户归还</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div>
            <h3>读者信息</h3>
            <div>
                <el-input placeholder="请输入读者证号" size="small" style="width:200px;" v-model="readerName"></el-input>
                <el-button size="small" type="primary" @click="searchReader">确定</el-button>
                <div style="font-size:16px;" class="mt-4 df-aic">
                    <span>读者证号：</span>
                    <el-input v-model="readerInfo.userName" size="small" style="width:200px;" readonly></el-input>

                    <span class="ml-4">手机号码：：</span>
                    <el-input v-model="readerInfo.phoneNumber" size="small" style="width:200px;" readonly></el-input>

                    <span class="ml-4">读者名称：：</span>
                    <el-input v-model="readerInfo.fullName" size="small" style="width:200px;" readonly></el-input>


                </div>
            </div>

        </div>

        <div class="mt-9">
            <h3>归还信息</h3>
            <div class="df">
                <el-input placeholder="请输入条形码" size="small" style="width:200px;" v-model="ticketNumber"></el-input>
                <el-button size="small" type="primary" @click="searchBookStock" class="ml-2">搜索</el-button>
                <el-button size="small" type="primary" @click="backBookMethod" class="ml-2" :disabled="multipleSelection.length==0">批量归还</el-button>
            </div>


            <el-table :data="borrowBookTableData" @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="bookName" label="书籍名称"></el-table-column>
                <el-table-column prop="isbn" label="isbn"></el-table-column>
                <el-table-column prop="indexBookNumber" label="索书号"></el-table-column>
                <el-table-column prop="ticketNumber" label="条形码"></el-table-column>
                <el-table-column  label="借出日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rentDate">
                            {{scope.row.rentDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="应还日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.shouldBackDate">
                            {{scope.row.shouldBackDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
<!--                        <el-button type="danger" size="small" @click="removeBorrow(scope.row,scope.$index)">移除</el-button>-->
                        <el-button type="primary" size="small" @click="backBorrowSingleMethod(scope.row,scope.$index)">归还</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                readerName:"",
                readerInfo:{
                    fullName:"",
                    idCard:"",
                    phoneNumber:"",
                    userName:"",
                },
                ticketNumber : "",
                borrowBookTableData:[],
                queryParam : {
                    name:"",
                    idCard:""
                },
                deleteLoading : false,
                addOrEditTypeDialogVisible : false,
                addOrEditTypeForm : {
                    id : "",
                    name : "",
                    parentId : ""
                },
                multipleSelection:[]
            }
        },
        mounted() {
            this.$nextTick(function () {

            });
        },
        methods: {
            //表格的勾选事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //搜索读者信息
            searchReader(){
                let that = this;
                if(!that.readerName){
                    that.$message.error("请填写读者账号");
                    return;
                }
                if(!judgeIdCard(that.readerName)){
                    that.$message.error("读者证号不正确");
                    return;
                }
                that.readerInfo.fullName = "";
                that.readerInfo.idCard = "";
                that.readerInfo.phoneNumber = "";
                that.readerInfo.userName = "";
                requestApiTB("user/getUserByName",{userName:that.readerName},"post",function(res){
                    if (res.code === 0) {
                        if(res.data){
                            that.readerInfo = res.data;
                        }
                    }else{
                        that.$message.error(res.msg);
                    }
                })
            },

            //查询借阅的图书信息
            searchBookStock(){
                let that = this;
                // if(!that.ticketNumber){
                //     that.$message.error("请填写条码号");
                //     return;
                // };
                if(!that.readerInfo.userName){
                    that.$message.error("请先查询会员的信息");
                    return;
                }
                let queryParam= {
                    "ticketNumber" : that.ticketNumber,
                    //"borrowUserName" : that.readerInfo.userName
                    "borrowUserName" : that.readerInfo.id
                }
                that.borrowBookTableData = [];
                requestApiTB("record/getRecordByUserNameList",queryParam,'post',function(res){
                    if(res.code === 0){
                        if(res.data){
                            that.borrowBookTableData = res.data;
                            // let isExists = false;
                            // for(let i = 0 ; i < that.borrowBookTableData.length ; i++){
                            //     if(res.data.ticketNumber == that.borrowBookTableData[i].ticketNumber){
                            //         isExists = true;
                            //     }
                            // }
                            // if(!isExists){
                            //     that.borrowBookTableData.push(res.data);
                            // }
                        }else{
                            that.$message.success("该读者没有借阅的书籍");
                        }
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //单个归还图书
            backBorrowSingleMethod(row){
                let that = this;
                that.doBackMethod([row]);
            },

            //归还的方法
            backBookMethod(){
                let that = this;
                if(that.multipleSelection.length == 0){
                    that.$message.error("请选择需要归还的书籍");
                    return;
                }
                that.doBackMethod(that.multipleSelection);

            },
            //真正执行归还的方法
            doBackMethod(backDatas){
                let that = this;
                if(!that.readerInfo.userName){
                    that.$message.error("请先查询归还的人");
                    return;
                }
                let deepCopyborrowBookTableData = JSON.parse(JSON.stringify(backDatas));
                let submitData = {
                    "borrowBooks" : deepCopyborrowBookTableData,
                    "borrowUserName" : that.readerInfo.userName
                }
                //判断书籍的状态
                requestApiTB("record/backBook",submitData,"post",function(res){
                    if (res.code === 0) {
                        if(res.data){
                            that.$message.success("操作成功");
                            setTimeout(function(){
                                that.searchBookStock();

                            }, 500);
                        }
                    }else{
                        that.$message.error(res.msg);
                    }
                })
            },

            removeBorrow(row,index){
                let that = this;
                that.borrowBookTableData.splice(index, 1);
            },




        }
    })
</script>
</html>